<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        :columns="columns"
        :request-api="getRpaApi"
        :init-param="initParam"
        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出数据</el-button>
        </template>
      </ProTable>
    </div>
  </div>
</template>
<script setup lang="ts" name="runstatus">
import { ref, reactive } from "vue";
// import { ElMessageBox } from "element-plus";
// import { useDownload } from "@/hooks/useDownload";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Download } from "@element-plus/icons-vue";
import { getRpaApi } from "@/api/modules/rpa";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ departmentId: "1" });

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: "index", label: "序号", width: 80 },
  { prop: "数智员工编号", label: "数智员工编号", width: 140 },
  { prop: "磐匠数智员工ID", label: "磐匠数智员工ID", width: 140 },
  { prop: "磐匠应用名称", label: "磐匠应用名称", showOverflowTooltip: false },
  { prop: "所属组织", label: "所属组织", width: 100 },
  { prop: "职位", label: "职位" },
  { prop: "业务联系人", label: "业务联系人" },
  { prop: "年运行次数", label: "年运行次数", width: 140, sortable: true, tag: true },
  { prop: "月运行次数", label: "月运行次数", width: 140, sortable: true, tag: true }
]);

// 导出用户列表
const downloadFile = async () => {
  // ElMessageBox.confirm("确认导出用户数据?", "温馨提示", { type: "warning" }).then(() =>
  //   useDownload(exportInfoApi, "数智员工运行情况", proTable.value?.searchParam)
  // );
};
</script>
